<template>
  <view class="filter-job">
    <SideNavFilter
      :filterTypeList="filterTypeList"
      @filterTypeChooseEmit="filterTypeChooseEmit"
    />
    <view class="footer">
      <view class="footer-btn _btn-cancel" @tap="chooseCancel"
        ><text>清除</text></view
      >
      <view class="footer-btn _btn-confirm" @tap="chooseConfirm"
        ><text>确定</text></view
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import SideNavFilter from "@/components/SideNavFilter.vue";

// 定义左侧数据
const filterTypeList = ref([]);
filterTypeList.value = [
  {
    id: 1,
    type: "学历",
    title: "学历要求",
    titleTips: "", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: ["初中及以下", "中专/中技", "高中", "大专", "本科", "硕士", "博士"],
    isRadio: false, // 是否为单选
    chooseList: [], // 已选数据
  },
  {
    id: 2,
    type: "薪资",
    title: "薪资待遇",
    titleTips: "（单选）", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: ["3K以下", "3-5K", "5-10K", "10-20K", "20-50K", "50K以上"],
    isRadio: true, // 是否为单选
    chooseList: [], // 已选数据
  },
  {
    id: 3,
    type: "经验",
    title: "经验要求",
    titleTips: "", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: [
      "在校生",
      "应届生",
      "1年以内",
      "1-3年",
      "3-5年",
      "5-10年",
      "10年以上",
    ],
    isRadio: false, // 是否为单选
    chooseList: [], // 已选数据
  },
  {
    id: 4,
    type: "行业",
    title: "行业分类",
    titleTips: "", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: ["电子商务", "智能硬件", "移动互联网", "互联网", "计算机软件"],
    isRadio: false, // 是否为单选
    chooseList: [], // 已选数据
  },
  {
    id: 5,
    type: "公司规模",
    title: "公司规模",
    titleTips: "", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: [
      "0-20人",
      "20-99人",
      "100-499人",
      "500-999人",
      "1000-9999人",
      "10000人以上",
    ],
    isRadio: false, // 是否为单选
    chooseList: [], // 已选数据
  },
  {
    id: 6,
    type: "融资",
    title: "融资",
    titleTips: "", // 定义title旁边小字说明，如有单独括号内容
    isFirstChoice: true, // 是否有置空的首选 如“全选”、“不限”
    firstChoice: "不限", // 定义首选项名称
    list: ["未融资", "天使轮", "A轮", "B轮", "C轮", "D轮及以上", "已上市"],
    isRadio: false, // 是否为单选
    chooseList: [], // 已选数据
  },
];

// 获取右侧选择事件数据
function filterTypeChooseEmit(data) {
  console.log("filterTypeChooseEmit", data);
}

// 清除事件
function chooseCancel() {
  // 清除事件逻辑
}

// 确定事件
function chooseConfirm() {
  // 确定事件逻辑
}
</script>

<style lang="scss" scoped>
.filter-job {
  width: 100%;
  position: relative;

  .footer {
    width: 100%;
    height: 146rpx;
    background-color: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid #ececec;
    box-sizing: border-box;
    padding: 32rpx 28rpx 22rpx;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .footer-btn {
      height: 92rpx;
      border-radius: 8rpx;
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      line-height: 92rpx;
    }

    ._btn-cancel {
      width: 244rpx;
      background-color: #ececec;
      color: #1c1c1c;
    }

    ._btn-confirm {
      width: 420rpx;
      background-color: #1872ff;
      color: #ffffff;
    }
  }
}
</style>
